<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距属性: margin属性 【微调: 文字或者图片】 
			margin使用问题1: 	自适应居中，建议使用div，套块元素、行内块元素、行内元素
			      使用问题2:     行元素，加上下外边距会失效   只能动右左外边距
				        行元素: 不可以设置高宽【高--不可以动上下】，在一行内显示【宽--可以左右动】
				  使用问题3: 垂直外边距问题
				  使用问题4: 垂直外边距问题
			*/
			img{
				border: 1px solid red;
				/* margin : 1个属性值: 顺时针  上 右  下  左  */
				margin: 100px;
				/* margin : 2个属性值: 顺时针  上下   右左  */
				margin: 10px 200px;
				/* 常用: 盒子自适应居中---失效
				       行内块: 可以设置高宽，在一行内显示，无法设置居中
				       margin: 使用问题:1. 自适应居中，必须设置宽度 */
				margin: 0 auto;
				/* margin : 3个属性值: 顺时针  上   右左   下*/
				mar gin: 100px 200px 200px;
				/* margin : 4个属性值: 顺时针  上   右   下   左  */
				mar gin: 100px 200px 300px 400px;
				
			}
			h1{ 
				/* 块元素: 可以设置高宽，不在一行内显示，无法居中，内置文本  
				         text-align:center  */
				/* 常用: 盒子自适应居中---设置宽度 */
				width: 100%;
				border: 1px solid red;
				text-align: center;
				margin: 100px 200px;
			}
			span{
				/* 行元素: 不可以设置高宽【高--不可以动上下】，在一行内显示【宽--可以左右】，无法居中，内置文本
				        text-align:center ;*/
				/* 常用: 盒子自适应居中---失效 */
				width: 100%;
				border: 1px solid red;
				text-align: center;
			}
			div{
				width: 200px;
				height: 200px;
				background: blue;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型: 四个部分组成: (外边距、边框、内边距、内容)
		                     外边距: 边框以外四周，叫做外边距
							 margin属性
							 边框: --
							 内边距:  边框以内 与内容 之间的距离，叫做内边距
							 内容: 块、行、行内块元素本身的宽高
			所有元素存在框模型当中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞雪人.png"width="500px" height="500px" alt="圣诞雪人" >
		<span>行内元素: 圣诞</span>
	</body>
</html>